<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>New Order Form</title>
  <script type="text/javascript" th:src="@{/js/Order.js}"></script>
</head>
<body>
<!-- 包含顶部模板 -->
<div th:replace="common/top"></div>

<div id="orderContainer">
  <div id="Catalog">
    <form th:action="@{/newOrder(newOrderFormSubmitted=true)}" method="post">
      <table>
        <tr>
          <th colspan="2">Payment Details</th>
        </tr>
        <tr>
          <td>Card Type:</td>
          <td>
            <select name="cardType" th:value="${session.order?.cardtype}">
              <option value="Visa">Visa</option>
              <option value="wechat">WeChat</option>
              <option value="alipay">Alipay</option>
              <option value="others">Others</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Card Number:</td>
          <td>
            <input type="text" name="creditCard" th:value="${session.order?.creditcard}"/>
          </td>
        </tr>
        <tr>
          <td>Expiry Date (MM/YYYY):</td>
          <td>
            <input type="text" name="expiryDate" th:value="${session.order?.exprdate}"/>
          </td>
        </tr>
        <tr>
          <th colspan="2">Billing Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>
            <input type="text" id="billToFirstName"
                   name="billToFirstName"
                   th:value="${session.loginAccount?.firstname}"/>
          </td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>
            <input type="text" name="billToLastName"
                   th:value="${session.loginAccount?.lastname}"/>
          </td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>
            <input type="text" size="40" name="billAddress1"
                   th:value="${session.loginAccount?.addr1}"/>
          </td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>
            <input type="text" size="40" name="billAddress2"
                   th:value="${session.loginAccount?.addr2}"/>
          </td>
        </tr>
        <tr>
          <td>City:</td>
          <td>
            <input type="text" name="billCity"
                   th:value="${session.loginAccount?.city}"/>
          </td>
        </tr>
        <tr>
          <td>State:</td>
          <td>
            <input type="text" size="40" name="billState"
                   th:value="${session.loginAccount?.state}"/>
          </td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>
            <input type="text" size="40" name="billZip"
                   th:value="${session.loginAccount?.zip}"/>
          </td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>
            <input type="text" size="40" name="billCountry"
                   th:value="${session.loginAccount?.country}"/>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="checkbox" name="shippingAddressRequired"
                   value="true"
                   />
<!--            th:checked="${session.shippingAddressRequired}"-->
            Ship to different address...
          </td>
        </tr>
      </table>
      <input type="button" name="newOrder" value="Continue" onclick="jump2shiporder();" />
    </form>
  </div>
</div>

<!-- 包含底部模板 -->
<div th:replace="common/bottom"></div>

</body>
</html>